<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 25 24"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><circle data-follow-stroke="currentColor" cx="12.667" cy="12" r="11" stroke-width="2" :stroke="_stroke"/><path data-follow-fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M12.787 8.5H9.251c-1.007 0-1.681.332-2.105.781-.43.456-.645 1.077-.645 1.72 0 1.312.857 2.499 2.25 2.499.52 0 .863-.17 1.078-.384.22-.22.338-.518.347-.826a1.185 1.185 0 0 0-.281-.82c-.182-.205-.467-.361-.894-.361-.356 0-.514.101-.577.166a.272.272 0 0 0-.073.238.3.3 0 0 0 .13.21c.049.03.146.065.327-.01a.5.5 0 0 1 .385.922c-.444.186-.884.156-1.234-.06a1.3 1.3 0 0 1-.596-.913 1.271 1.271 0 0 1 .344-1.084c.3-.31.749-.47 1.294-.47.698 0 1.262.268 1.643.7.373.422.547.973.531 1.511a2.213 2.213 0 0 1-.64 1.505c-.423.422-1.03.676-1.784.676-2.108 0-3.25-1.813-3.25-3.5 0-.858.286-1.737.918-2.406.639-.676 1.59-1.094 2.833-1.094H14a.5.5 0 1 1 0 1h-1.214Z" :fill="_fill"/><path data-follow-fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M12.367 8.5h3.977c1.165 0 1.948.344 2.435.802.489.46.722 1.074.722 1.698 0 1.255-.93 2.5-2.594 2.5-.616 0-1.026-.18-1.278-.404a1.124 1.124 0 0 1-.387-.808c-.01-.292.096-.58.312-.797.21-.212.556-.382 1.072-.382.427 0 .631.11.715.186.075.07.09.142.079.209a.299.299 0 0 1-.155.207c-.082.044-.232.08-.465-.006a.5.5 0 0 0-.348.938c.973.36 1.82-.182 1.954-.972a1.217 1.217 0 0 0-.39-1.113c-.326-.298-.804-.45-1.39-.45-.749 0-1.36.255-1.781.678-.418.42-.621.979-.603 1.535.019.558.26 1.112.724 1.523.465.413 1.124.656 1.941.656 2.275 0 3.594-1.755 3.594-3.5 0-.876-.33-1.761-1.037-2.426-.708-.667-1.754-1.074-3.12-1.074h-5.343a.5.5 0 0 0 0 1h1.366ZM9.633 22.623v-9.205h1v9.205h-1Z" :fill="_fill"/><path data-follow-fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M16.206 22.623V14h1v8.623h-1ZM12.7 23.5V12.103h1V23.5h-1Z" :fill="_fill"/><path data-follow-fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M15 12.603h-4.5v-1H15v1ZM7.501 5.5h11V8h-1V6.5h-9V8h-1V5.5Z" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Foia extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
